<style>
@media print {
  ._wz_userData {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_userData"  ref="userData">
    <Form>
      <table cellpadding="0" cellspacing="0" border="0">
        <colgroup>
          <col width="13%">
          <col width="20%">
          <col width="13%">
          <col width="20%">
          <col width="13%">
          <col width="20%">
        </colgroup>
        <tbody>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">
            基本信息
            <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 4px;">打印</Button>
          </td>
        </tr>
        <tr>
          <td colspan="2" rowspan="4">
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                <img :src="!!userData.avatar?apiUrl.imgUrl+userData.avatar:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </td>
          <td style="text-align: right;font-weight: 600;">人员名称</td>
          <td>{{!!userData.name?userData.name:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">人员性别</td>
          <td>{{!!userData.gender?userData.gender:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">联系电话</td>
          <td>{{!!userData.phone?userData.phone:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">从业类型</td>
          <td>{{!!userData.typeName?userData.typeName:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">身份证号</td>
          <td>{{!!userData.identifyNum?userData.identifyNum:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">入职时间</td>
          <td>{{!!userData.entryTime?userData.entryTime:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">运输企业</td>
          <td colspan="3">{{!!userData.deptName?userData.deptName:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">家庭地址</td>
          <td colspan="5">{{!!userData.address ? userData.address : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">备注</td>
          <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!userData.remark ? userData.remark : '--'}}</td>
        </tr>
        <template>
          <!--          <template v-if="person.id">-->
          <td style="font-weight: 600;position:relative;" colspan="6">合同认证信息</td>
          <tr>
            <td style="text-align: right;font-weight: 600;">聘用合同</td>
            <td class="_wz_contractsData" @click="contractFun('聘用合同')" v-if="!!coreDriverContract.employSignImg">已签署</td>
            <td v-else>未签署</td>
            <td style="text-align: right;font-weight: 600;">承诺书</td>
            <td class="_wz_contractsData" @click="contractFun('承诺书')" v-if="!!coreDriverContract.promiseSignImg">已签署</td>
            <td v-else>未签署</td>
            <td style="text-align: right;font-weight: 600;">责任状</td>
            <td class="_wz_contractsData" @click="contractFun('责任状')" v-if="!!coreDriverContract.dutySignImg">已签署</td>
            <td v-else>未签署</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">告知书</td>
            <td class="_wz_contractsData" @click="contractFun('职业危害告知书')" v-if="!!coreDriverContract.noticeSignImg">已签署</td>
            <td v-else>未签署</td>
            <td style="text-align: right;font-weight: 600;">继续教育</td>
            <td class="_wz_contractsData" @click="handleView(coreDriverContract.educationImg)" v-if="!!coreDriverContract.educationImg">已上传</td>
            <td v-else>未上传</td>
            <td style="text-align: right;font-weight: 600;">体检报告</td>
            <td class="_wz_contractsData" @click="handleView(coreDriverContract.physicalImg)" v-if="!!coreDriverContract.physicalImg">已上传</td>
            <td v-else>未上传</td>
          </tr>
        </template>
        <template>
<!--          <template v-if="person.id">-->
          <td style="font-weight: 600;position:relative;" colspan="6">身份证信息</td>
          <tr>
            <td style="text-align: right;font-weight: 600;">名称</td>
            <td>{{!!person.personName ? person.personName : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">性别</td>
            <td>{{!!person.personSex ? person.personSex : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">民族</td>
            <td>{{!!person.personNation ? person.personNation : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">出生日期</td>
            <td>{{!!person.personDate ? person.personDate : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">签发机关</td>
            <td>{{!!person.personIssuedBy ? person.personIssuedBy : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">有效期限</td>
            <td>{{!!person.personValidDate ? person.personValidDate : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">公民身份证</td>
            <td colspan="5">{{!!person.personId ? person.personId : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">住址</td>
            <td colspan="5">{{!!person.personAddress ? person.personAddress : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">身份证正面</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!person.personFrontPic?apiUrl.imgUrl+person.personFrontPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
            <td style="text-align: right;font-weight: 600;">身份证反面照</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!person.personBackPic?apiUrl.imgUrl+person.personBackPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
          </tr>
        </template>

        <template>
<!--          <template v-if="license.id">-->
          <tr>
            <td style="font-weight: 600;position:relative;" colspan="6">驾驶证信息</td>
          </tr>
          <tr>
            <td colspan="2" rowspan="4">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!license.driverPic?apiUrl.imgUrl+license.driverPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
            <td style="text-align: right;font-weight: 600;">人员名称</td>
            <td>{{!!license.driverName ? license.driverName : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">人员性别</td>
            <td>{{!!license.driverSex ? license.driverSex : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">出生日期</td>
            <td>{{!!license.driverDate ? license.driverDate : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">国籍</td>
            <td>{{!!license.driverNationality ? license.driverNationality : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">准驾车型</td>
            <td>{{!!license.driverClazz ? license.driverClazz : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">初次领证日期</td>
            <td>{{!!license.driverValidFrom ? license.driverValidFrom : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">有效期限</td>
            <td colspan="3">{{!!license.driverValidFrom && !!license.driverValidDate ? license.driverValidFrom + ' 至 ' + license.driverValidDate : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">发证单位</td>
            <td colspan="5">{{!!license.driverIssuedBy ? license.driverIssuedBy : '--'}}</td>
          </tr>
        </template>

        <template v-if="certificateData.length > 0">
          <tr>
            <td style="font-weight: 600;position:relative;" colspan="6">资格证信息</td>
          </tr>
          <template v-for="item,index in certificateData">
            <tr style="border-top: 3px solid #515a6e;">
              <td colspan="2" rowspan="4">
                <div class="demo-upload-list">
<!--                  <div class="demo-upload-list"  :class="item.certificateState == 1?'_wz_type_color_39a4ff':'_wz_type_color_ff9900'" :data-sub="item.certificateState == 1?'已生效':'已逾期'">-->
                  <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                    <img :src="!!item.certificatePic?apiUrl.imgUrl+item.certificatePic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
              </td>
              <td style="text-align: right;font-weight: 600;">人员名称</td>
              <td>{{!!item.certificateName ? item.certificateName : '--'}}</td>
              <td style="text-align: right;font-weight: 600;">人员性别</td>
              <td>{{!!item.certificateSex ? item.certificateSex : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: right;font-weight: 600;">出生日期</td>
              <td>{{!!item.certificateDate ? item.certificateDate : '--'}}</td>
              <td style="text-align: right;font-weight: 600;">资格证编号</td>
              <td>{{!!item.certificateNumber ? item.certificateNumber : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: right;font-weight: 600;">身份名称</td>
              <td>{{!!item.certificateDriverTypeName ? item.certificateDriverTypeName : '--'}}</td>
              <td style="text-align: right;font-weight: 600;">类别名称</td>
              <td>{{!!item.certificateEmployeeCategoryName ? item.certificateEmployeeCategoryName : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: right;font-weight: 600;">准驾车型名称</td>
              <td>{{!!item.certificateDrivingTypeName ? item.certificateDrivingTypeName : '--'}}</td>
              <td style="text-align: right;font-weight: 600;">资格证号码</td>
              <td>{{!!item.certificateNo ? item.certificateNo : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: right;font-weight: 600;">初次领证日期</td>
              <td>{{!!item.certificateInitDate ? item.certificateInitDate : '--'}}</td>
              <td style="text-align: right;font-weight: 600;">截至有效日期</td>
              <td>{{!!item.certificateDueDate ? item.certificateDueDate : '--'}}</td>
              <td style="text-align: right;font-weight: 600;">下次培训时间</td>
              <td>{{!!item.certificateTrainDate ? item.certificateTrainDate : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: right;font-weight: 600;">家庭住址</td>
              <td colspan="5">{{!!item.certificateAddress ? item.certificateAddress : '--'}}</td>
            </tr>
          </template>

        </template>
        </tbody>
      </table>
    </Form>

    <Drawer :title="userData.typeName + formTitle" v-model="formOperation" width="900" :draggable="true">
      <contract v-if="formOperation" :selectData="userData" :formTitle="formTitle"></contract>
    </Drawer>


    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
  import contract from './contract.vue'
  export default {
    props: ["selectData"],
    components: {
      contract,//列表
    },
    data() {
      return {
        spinShow:false,//本页加载
        contractData:{},//合同信息
        formTitle:'',
        formOperation:false,//合同详情
        userData: {},//用户信息
        license: {},//驾驶证
        person: {},//身份证
        certificateData:[],//资格证
        coreDriverContract:{},//合同
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      this.userDataFun()
    },
    methods: {//执行的方法
      handleView(data){
        let imgUrls = [];
        imgUrls.push(this.apiUrl.imgUrl+data)
        this.$viewerApi({
          images: imgUrls
        })
      },
      //合同详情
      contractFun(name){
        this.formTitle = name;
        this.formOperation = true;
      },
      printTest() {
        this.$print(this.$refs.userData) // 使用
      },
      userDataFun() {
        var that = this;
        if (!!!that.selectData) {
          that.userData = {};//用户信息
          that.license = {};//驾驶证
          that.person = {};//身份证
          return false;
        }
        //基本信息
        that.spinShow = true;
        that.axios.post(that.apiUrl.coreDriverCoreDriverInfo, {uuid: that.selectData.uuid}).then(res => {
          that.spinShow = false;
          if (!!res) {
            that.userData = !!res.data.data ? res.data.data : {};

            that.license = !!that.userData.coreDriverLicense?that.userData.coreDriverLicense:{}//驾驶证
            that.person = !!that.userData.coreDriverPerson?that.userData.coreDriverPerson:{}//身份证
            that.certificateData = that.userData.coreDriverCertificateList//资格证

            that.coreDriverContract = !!that.userData.coreDriverContract?that.userData.coreDriverContract:{};
          }
        }).catch(err => {
          console.log('失败', err);
        })
      }
    },
    watch: {//监听
      selectData(news, old) {
        this.userDataFun();
      }
    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_userData {
    height: 100%;
    overflow: auto;
    ._wz_contractsData{
      cursor: pointer;
      color: #2d8cf0;
    }

    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px !important;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border: 1px solid #515a6e;
        padding: 0 10px;
        word-break: break-word;
      }
    }

    .demo-upload-list {
      margin: 5px auto;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;

      img {
        min-height: 30%;
        max-height: 90%;
        min-width: 30%;
        max-width: 90%;
        //width: 100%;
        //height: 100%;
      }
    }
    ._wz_type_color_39a4ff:before {
      content: "";
      display: block;
      width: 120px;
      height: 120px;
      border-style: solid;
      border-color: transparent #39a4ff transparent transparent;
      border-width: 30px;
      position: absolute;
      top: -60px;
      left: -60px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      z-index: 1;
    }

    ._wz_type_color_39a4ff:after {
      content: attr(data-sub);
      position: absolute;
      top: -36px;
      left: 13px;
      z-index: 2;
      color: #fff;
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
      font-size: 12px;
    }



    ._wz_type_color_ff9900:before {
      content: "";
      display: block;
      width: 120px;
      height: 120px;
      border-style: solid;
      border-color: transparent #ff9900 transparent transparent;
      border-width: 30px;
      position: absolute;
      top: -60px;
      left: -60px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      z-index: 1;
    }

    ._wz_type_color_ff9900:after {
      content: attr(data-sub);
      position: absolute;
      top: -36px;
      left: 13px;
      z-index: 2;
      color: #fff;
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
      font-size: 12px;
    }

  }

</style>
